<!DOCTYPE html>
<html>
<head>
    <title>ScenarioFileTypePolicy</title>
    <script>    
        document.addEventListener('DOMContentLoaded', () => {
            async function saveFile() {
                let ext = document.getElementById("extensionText");
                // Show the save file picker
                const newHandle = await window.showSaveFilePicker({suggestedName:`sample_file.${ext.value}`});

                // Write the content to the selected file
                const writable = await newHandle.createWritable();
                await writable.write("sample sentence");
                await writable.close();
            }
            document.getElementById('showSaveFilePickerButton').addEventListener('click', saveFile);
        });
    </script>
</head>
<body>
    <h1>File Type Policy API Demo Page</h1>
    <p>Two customized example rules in this demo:</p>
    <p>1. Smoothly save *.eml file without file extension warning</p>
    <p>2. Intentionally block save *.iso file</p>
    <p>Please enter a file extension: <input type="text" id="extensionText" placeholder="try eml or iso" />
    <button id="showSaveFilePickerButton">save</button></p>
    <br>
</body>
</html>
